<template>
    <NavBar :show-icon="true" title-text="搜索" bg-color="#fff" />
    <!--  :style="{ marginTop: systemInfo.sBarHeight + systemInfo.titleTop + 'px' }" -->
    <div class="main">
        <view class="top" :style="{ top: systemInfo.sBarHeight + systemInfo.titleTop + 'px' }">
            <view class="ipt">
                <tn-search-box v-if="changeType == 1" :search-button="false" @search="search" :border="false"
                    v-model="queryData.keywords" placeholder="搜索职位/公司/内容" />
                <tn-search-box v-else :search-button="false" @search="search" :border="false"
                    v-model="cQueryData.keywords" placeholder="搜索职位/公司/内容" />
            </view>
            <view class="dispaly-just-between">
                <view class="tab">
                    <tn-tabs v-model="currentTabIndex" bg-color="rgba(0,0,0,0)" :bottom-shadow="false"
                        active-color="#000" active-font-size="40" :bar="false">
                        <tn-tabs-item @click="changeTab(item)" v-for="(item, index) in tabsData" :key="index"
                            :title="item.text" />
                    </tn-tabs>
                </view>
                <view class="cate w-100">
                    <view class="item dispaly" @click="navTo(`/subPackage/index/selectCityPage`)">
                        <view class="text">地域</view>
                        <view class="s">
                            <image src="/static/icon/s.png" />
                        </view>
                    </view>
                    <view class="item dispaly" @click="cateOpen" v-if="changeType == 1">
                        <view class="text">筛选</view>
                        <view class="s">
                            <image src="/static/icon/s.png" />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="list" :style="{ marginTop: topNavheight + systemInfo.sBarHeight + systemInfo.titleTop + 'px' }">
            <view v-if="changeType == 1">
                <!-- <Empty v-if="!loadShow && !jobListData.length" text="暂无职位" /> -->
                <jobCard :data="jobListData" />
                <LoadMore :status="status" :show="loadShow" />
            </view>
            <view v-else>
                <!-- <Empty text="暂无单位" v-if="!cLoadShow && !companyListData.length" /> -->
                <dCard :data="companyListData" />
                <LoadMore :status="cStatus" :show="cLoadShow" />
            </view>
        </view>
        <!-- 地址 -->
        <!-- <SelectArea :tab="false" :show-popup="showPopup" @close="show => showPopup = show" /> -->
        <!-- 分类 -->
        <SelectCate v-if="jobCateListData.length" :data="jobCateListData" @confirm="confirm" :tab="false"
            :show-cate="cateShow" @close="show => cateShow = show" />
    </div>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import { onLoad, onShow } from '@dcloudio/uni-app'
import TnSearchBox from '@tuniao/tnui-vue3-uniapp/components/search-box/src/search-box.vue'
import { ref, onMounted, reactive } from 'vue';
import TnTabs from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs.vue'
import TnTabsItem from '@tuniao/tnui-vue3-uniapp/components/tabs/src/tabs-item.vue'
import SelectArea from '@/components/address/selectArea.vue';
import SelectCate from '@/pages/index/components/selectCate.vue'
import jobCard from '@/components/jobCard/jobCard.vue';
import { getElementHeight } from '@/utils/util'
import dCard from '@/components/jobCard/dCard.vue'
import type { TabDataType } from '@/types/more'
import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { getJobList, getCompanyJobList, getJobCate } from '@/api/home/home'
import type { JobObjectDataType, CompanyObjectType, CateType } from '@/types/responseData'
import type { RequestJobParmType } from '@/types/requstParm'

const searchValue = ref<string>('')
// 获取职位列表
const queryData = reactive<RequestJobParmType>({
    page: 1,
    limit: 10,
    keywords: searchValue.value,
    company_id: '',
    cat_name: ''
})

// 选择的职位分类
const confirm = (valueId: number) => {
    queryData.cat_name = valueId
    init()
    getListData()
}

// 请求职位列表
const status = ref<string>('loadmore')
const loadShow = ref<boolean>(false)
let jobListData = ref<Array<JobObjectDataType>>([])
const getListData = async () => {
    status.value = 'loading'
    const res = await getJobList(queryData)
    if (res.code == 0) {
        if (res.data.list.length) {
            status.value = 'loadmore'
            loadShow.value = true
            jobListData.value = [...jobListData.value, ...res.data.list]
        } else {
            status.value = 'nomore'
        }
    }
}

// 请求企业单位列表
const cQueryData = reactive<RequestJobParmType>({
    page: 1,
    limit: 10,
    keywords: searchValue.value,
    user_id: 2,
    city_id: ''
})
const cStatus = ref<string>('loadmore')
const cLoadShow = ref<boolean>(false)
let companyListData = ref<Array<CompanyObjectType>>([])
const getCompanyListData = async () => {
    cStatus.value = 'loading'
    const res = await getCompanyJobList(cQueryData)
    if (res.code == 0) {
        if (res.data.list.length) {
            cStatus.value = 'loadmore'
            cLoadShow.value = true
            companyListData.value = [...companyListData.value, ...res.data.list]
        } else {
            cStatus.value = 'nomore'
        }
    }
}

const search = () => {
    init()
    if (changeType.value == 1) {
        queryData.cat_name = ''
        // queryData.keywords = ''
        getListData()
    } else {
        // cQueryData.keywords = ''
        getCompanyListData()
    }
}

// 切换tab
const changeType = ref<number>(1)
const changeTab = (item: TabDataType) => {
    init()
    changeType.value = item.type
    if (changeType.value == 1) {
        getListData()
    } else {
        getCompanyListData()
    }
}

// 初始化
const init = () => {
    // loadShow.value = false
    // cLoadShow.value = false
    jobListData.value = []
    companyListData.value = []
    queryData.page = 1
    cQueryData.page = 1
}


let systemInfo = uni.getStorageSync('systemInfo')
const currentTabIndex = ref<number>(0)
const tabsData = ref<Array<TabDataType>>([
    {
        text: '职位',
        type: 1
    },
    {
        text: '单位',
        type: 2
    }
])


// 分类弹窗
const cateShow = ref<boolean>(false)

// 获取职位分类
const jobCateListData = ref<Array<CateType>>([])
const getJobCateListData = async () => {
    const res = await getJobCate()
    if (res.code == 0) {
        jobCateListData.value = res.data
    }
}

const cateOpen = () => {
    cateShow.value = true
    getJobCateListData()
}

// 地址弹窗
const showPopup = ref<boolean>(false)

onLoad((option) => {
    searchValue.value = option!.searchValue as string
    queryData.keywords = searchValue.value
    cQueryData.keywords = searchValue.value
    getListData()
})

onShow(() => {
    selCityGetData()
})

// 选择地址请求列表
const selCityGetData = () => {
    queryData.city_id = ''
    cQueryData.city_id = ''
    let pages = getCurrentPages()
    let currPage = pages[pages.length - 1] as any//当前页
    let id = currPage.data.id
    if (id) {
        queryData.city_id = id
        cQueryData.city_id = id
        init()
        if (changeType.value == 1) {
            getListData()
        } else {
            getCompanyListData()
        }
        currPage.data.id = ''
    }
}

// 获取top高度
const topNavheight = ref<number | unknown>(0)
onMounted(async () => {
    const height = await getElementHeight('.top')
    topNavheight.value = height
})


// 触底分页
onReachBottom(() => {
    if (changeType.value == 1) {
        (queryData.page as number)++
        getListData()
    } else {
        (cQueryData.page as number)++
        getCompanyListData()
    }

})

// 下拉刷新
onPullDownRefresh(async () => {
    uni.showLoading({
        title: '加载中'
    })
    queryData.city_id = ''
    cQueryData.city_id = ''
    queryData.cat_name = ''
    init()
    await getListData()
    await getCompanyListData()
    uni.stopPullDownRefresh()
    uni.hideLoading()
})

</script>
<style lang="scss" scoped>
:deep(.tn-search-box) {
    background-color: #f6f6f6 !important;
}

.list {
    padding: 20rpx 30rpx;
}

.top {
    background-color: #fff;
    padding: 0 30rpx 13rpx 30rpx;
    position: fixed;
    z-index: 999;
    // top: 0;
    width: 100%;

    .cate {
        padding-right: 30rpx;
        display: flex;
        justify-content: flex-end;
        padding-top: 30rpx;

        .item:first-child {
            margin-right: 20rpx;
        }

        .item {
            background-color: #fff;
            border-radius: 10rpx;
            width: 96rpx;
            height: 50rpx;
            text-align: center;
            line-height: 50rpx;
            justify-content: center;

            .text {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #717171;
            }

            .s {
                image {
                    width: 15rpx;
                    height: 15rpx;
                }
            }
        }
    }
}
</style>